﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Tabs</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /><link href="../demo.css" rel="stylesheet" type="text/css" />

    
    <script src="../../scripts/boot.js" type="text/javascript"></script>
    
    
</head>
<body>
    <h1>Tabs 选项卡</h1>      
    
    <input type="button" value="addTab" onclick="addTab()"/>
    <input type="button" value="removeTab" onclick="removeTab()"/>
    <input type="button" value="hideTab" onclick="hideTab()"/>
    <br />
<div id="tabs1" class="mini-tabs" activeIndex="0" style="width:350px;height:200px;"
    arrowPosition="side" showNavMenu="true"
>
    <div name="tab1" title="Tab1">
        1
    </div>
</div>

    <script type="text/javascript">
        mini.parse();

        var index = 2;
        function addTab() {
            var tabs = mini.get("tabs1");

            //add tab
            var tab = {title: "tab"+index++};
            tab = tabs.addTab(tab);            

            //tab body
            var el = tabs.getTabBodyEl(tab);
            el.innerHTML = index;

            //active tab
            tabs.activeTab(tab);

        }
        function removeTab() {
            var tabs = mini.get("tabs1");
            var tab = tabs.getActiveTab();
            if (tab) {
                tabs.removeTab(tab);
            }
        }

        function hideTab() {
            var tabs = mini.get("tabs1");
            var tab = tabs.getTab("tab1");
            if (tab) {
                tabs.updateTab(tab, { visible: false });
            }

        }
    </script>

</body>
</html>